﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
    string urls = "";
    List<Model.T_Pic> pic_list = (List<Model.T_Pic>)ViewData["Piclist"];
    var GetPicDomin = System.Configuration.ConfigurationManager.AppSettings["Pic_Domin"];
    if (pic_list != null && pic_list.Count > 0)
    {
        var b = from o in pic_list select o.Url;
        urls = string.Join(",", b.ToArray());
    }
    List<Model.PriceConfig> PriceConfiglist = (List<Model.PriceConfig>)ViewData["listPriceConfig"];

    List<Model.StylistPrice> StylistPricelist = (List<Model.StylistPrice>)ViewData["StylistPrice"];
    List<Model.StylelistDetailsInfo> DetailsInfoList = (List<Model.StylelistDetailsInfo>)ViewData["DetailsInfoList"];
    DetailsInfoList = DetailsInfoList.OrderBy(x => x.IndexNO).ToList();
}
<script src="~/Content/js/dialog/dialog.js"></script>
<script src="~/Content/js/common.js"></script>
<script src="~/Content/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="~/Content/js/layer/layer.js"></script>
<script type="text/javascript">
    var GetPicDomin = "@GetPicDomin";
    var keyValue = $.request("keyValue");
    function ajaxFileUpload() {
        $.ajaxFileUpload
        (
            {
                url: '/PicUpload/UploadStylistPic', //用于文件上传的服务器端请求地址
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: 'file1', //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status)  //服务器成功响应处理函数
                {
                    $("#img1").attr("src", GetPicDomin + data.imgurl);
                    $("#Pic").val(data.imgurl);
                    if (typeof (data.error) != 'undefined') {
                        if (data.error != '') {
                            alert(data.error);
                        } else {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )
        return false;
    }
</script>



<script>
    $(function () {
        if (!!keyValue) {
            $.ajax({
                url: "/Stylist/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    data.Birthday = new Date(data.Birthday).format("yyyy-MM-dd");
                    data.WorkDay = new Date(data.WorkDay).format("yyyy-MM-dd");
                    $("#img1").attr("src", GetPicDomin + data.Pic);
                    if (data.Sex == "0") {
                        $("#rd_Nan").click();
                    }
                    else {
                        $("#rd_Nv").click();
                    }


                    if (data.IsShow == "1") {
                        $("#rd_Show").click();
                    }
                    else {
                        $("#rd_NotShow").click();
                    }
                    $("#form1").formSerialize(data);
                }
            });
        }
        else {
            $("#rd_Nan").click();
            $("#rd_Show").click();
        }
        initPicBox();
    });
    function submitForm() {

        //手机校验
        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if (!myreg.test($("#Tel").val())) {
            layer.msg("请输入正确的手机号码！", { icon: 5 });
            return false;
        }
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test($("#IDCard").val()) === false) {
            layer.msg("身份证输入不合法！", { icon: 5 });
            return false;
        }
        if (!$('#form1').formValid()) {
            return false;
        }
        $("#HD_IsShow").val($("input[name='IsShow']:checked").val());
        $("#HD_Sex").val($("input[name='rd_Sex']:checked").val());
        $.submitForm({
            url: "/Stylist/SubmitForm?keyValue=" + keyValue,
            param: $("#form1").formSerialize(),
            success: function () {
                $.currentWindow().$("#gridList").trigger("reloadGrid");
            }
        })
    }
</script>
<style>
    .layui-layer-msg {
        border: none;
        color: #0a0a0a;
    }
</style>
<form id="form1">
    <div style="margin-top: 10px; margin-left: 10px; margin-right: 10px;">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">基本信息</a></li>
            @*<li ><a href="#">扩展信息</a></li>*@
        </ul>
        <div style="padding-top: 20px; margin-right: 30px;">
            <table class="form">
                <tr>
                    <th class="formTitle">昵称</th>
                    <td class="formValue">
                        <input id="NickName" name="NickName" type="text" class="form-control required" placeholder="昵称" />
                    </td>
                    <th class="formTitle">姓名</th>
                    <td class="formValue">
                        <input id="Name" name="Name" type="text" class="form-control required" placeholder="姓名" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">出生日期</th>
                    <td class="formValue">
                        <input id="Birthday" name="Birthday" type="text" class="form-control input-wdatepicker required" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd' })" placeholder="出生日期" />
                    </td>
                    <th class="formTitle">性别</th>
                    <td class="formValue">
                        <div class="rdio">
                            <input id="rd_Nan" name="rd_Sex" type="radio" value="0"><label for="rd_Nan">男</label>
                        </div>
                        <div class="rdio">
                            <input id="rd_Nv" name="rd_Sex" type="radio" value="1"><label for="rd_Nv">女</label>
                        </div>
                        <input type="hidden" id="HD_Sex" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">手机号</th>
                    <td class="formValue">
                        <input id="Tel" name="Tel" type="text" class="form-control required" placeholder="手机号" maxlength="20" />
                    </td>
                    <th class="formTitle">所属店面</th>
                    <td class="formValue">
                        <div class="input-group">
                            <input id="ShopName" name="ShopName" type="text" class="form-control required" placeholder="所属店面" style="width: 200px;" maxlength="25">
                            <span class="input-group-btn">
                                <button id="btn_search" type="button" class="btn  btn-primary" onclick="SelectShopInfo();"><i class="fa fa-search"></i></button>
                            </span>
                            <input type="hidden" id="ShopID">
                        </div>
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">身高</th>
                    <td class="formValue">
                        <input id="Height" name="Weight" type="text" class="form-control number" placeholder="身高" maxlength="5" />
                    </td>
                    <th class="formTitle">体重</th>
                    <td class="formValue">
                        <input id="Weight" name="Weight" type="text" class="form-control number" placeholder="体重" maxlength="5" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">身份证号码</th>
                    <td class="formValue">
                        <input id="IDCard" name="IDCard" type="text" class="form-control required" placeholder="身份证号码" />
                    </td>
                    <th class="formTitle">入职时间</th>
                    <td class="formValue">
                        <input id="WorkDay" name="WorkDay" type="text" class="form-control input-wdatepicker" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd' })" placeholder="入职时间" />
                    </td>
                </tr>
                <tr>

                    <th class="formTitle">手机端是否显示</th>
                    <td class="formValue">
                        <div class="rdio">
                            <input id="rd_Show" name="IsShow" type="radio" value="1"><label for="rd_Show">显示</label>
                        </div>
                        <div class="rdio">
                            <input id="rd_NotShow" name="IsShow" type="radio" value="0"><label for="rd_NotShow">不显示</label>
                        </div>
                        <input type="hidden" id="HD_IsShow" />
                    </td>

                    <th class="formTitle">发型师序号</th>
                    <td class="formValue">
                        <input id="OrderIndex" name="OrderIndex" type="text" class="form-control number required" placeholder="用户客户预约的序号，小的排在前（数字1-26）" />
                    </td>
                </tr>
                <tr>
                    <th class="formTitle" valign="top" style="padding-top: 5px;">
                        地址
                    </th>
                    <td class="formValue" colspan="3">
                        <textarea id="Address" name="Address" class="form-control" style="height: 80px;" maxlength="100"></textarea>
                    </td>
                </tr>
                <tr>
                    <th class="formTitle" valign="top" style="padding-top: 5px;">
                        个人介绍
                    </th>
                    <td class="formValue" colspan="3">
                        <textarea id="Introduce" name="Introduce" class="form-control" style="height: 80px;" maxlength="100"></textarea>
                    </td>
                </tr>
                <tr>
                    <th class="formTitle">发型师封面</th>
                    <td class="formValue" colspan="2">
                        <img id="img1" width="380" height="190" />
                        <input type="file" id="file1" name="file1" style="display:none;" onchange="ajaxFileUpload();" />
                    </td>
                    <td>
                        <button type="button" class="btn btn-success" style="margin-right: 50px;float:right;" onclick="UpdateSinglePic();">上传封面图片</button>
                        <input type="hidden" id="Pic" name="Pic">
                    </td>

                </tr>
                @*<tr>
                        <th class="formTitle" valign="top" style="padding-top: 5px;">
                        </th>
                        <td class="formValue" colspan="3">
                            <div class="row">
                                <div class="col-xs-2">

                                </div>
                            </div>
                        </td>
                    </tr>*@
            </table>
            <div class="row" style="width: 780px;">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">个人资料【该信息将显示到微信端的发型师详情：个人资料 里面】</h3>
                    </div>
                    <div class="panel-body" style="padding:0px;">
                        <table id="tb_userInfo">
                            <tr>
                                <td class="formValue"><input type="text" id="txt_column_name" name="txt_column_name" class="form-control" maxlength="100" style="width:128px;margin:3px;padding:2px;color:orangered;" value="@DetailsInfoList[0].C_Name" placeholder="名称：【个人介绍：】" /></td>
                                <td class="formValue"><input type="text" id="txt_column_details" name="txt_column_details" class="form-control" maxlength="100" style="width:271px;margin:3px;padding:2px;color:orangered;" value="@DetailsInfoList[0].C_Details" placeholder="描述：【上海沙宣总监课程、深圳钎手造型班】" /></td>
                                <td class="formValue"><input type="text" id="txt_column_time" name="txt_column_time" class="form-control" maxlength="100" style="width:153px;margin:2px;padding:3px;color:orangered;" value="@DetailsInfoList[0].C_Time" placeholder="时间：【2012.1～2014.1】" /></td>
                                <td class="formValue"><input type="text" id="txt_column_remark" name="txt_column_remark" class="form-control" maxlength="100" style="width:171px; margin:3px;padding:2px;color:orangered;" value="@DetailsInfoList[0].C_Remark" placeholder="职位：【职位：首席造型师】" /></td>
                                <td>
                                    <div class="btn-group">
                                        <a id="NF-add" authorize="yes" class="btn btn-primary dropdown-text" onclick="btn_addDetails()"><i class="fa fa-plus"></i></a>
                                    </div>
                                </td>
                            </tr>
                            @{
                                if (DetailsInfoList.Count > 1)
                                {
                                    for (int i = 1; i < DetailsInfoList.Count; i++)
                                    {
                                        <tr>
                                            <td class="formValue"><input type="text" id="txt_column_name@(i)" name="txt_column_name@(i)" class="form-control" maxlength="100" style="width:128px;margin:3px;padding:2px;color:orangered;" value="@DetailsInfoList[i].C_Name" placeholder="名称：【个人介绍：】" /></td>
                                            <td class="formValue"><input type="text" id="txt_column_details@(i)" name="txt_column_details@(i)" class="form-control" maxlength="100" style="width:271px;margin:3px;padding:2px;color:orangered;" value="@DetailsInfoList[i].C_Details" placeholder="描述：【上海沙宣总监课程、深圳钎手造型班】" /></td>
                                            <td class="formValue"><input type="text" id="txt_column_time@(i)" name="txt_column_time@(i)" class="form-control" maxlength="100" style="width:153px;margin:2px;padding:3px;color:orangered;" value="@DetailsInfoList[i].C_Time" placeholder="时间：【2012.1～2014.1】" /></td>
                                            <td class="formValue"><input type="text" id="txt_column_remark@(i)" name="txt_column_remark@(i)" class="form-control" maxlength="100" style="width:171px; margin:3px;padding:2px;color:orangered;" value="@DetailsInfoList[i].C_Remark" placeholder="职位：【职位：首席造型师】" /></td>
                                        </tr>
                                    }
                                }
                            }
                        </table>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">剪发价格配置</h3>
                    </div>
                    <div class="panel-body">
                        <table class="form">
                            @{
                                var jianfalist = PriceConfiglist.Where(x => x.Type == 1).ToList();
                                if (jianfalist != null && jianfalist.Count > 0)
                                {
                                    for (int i = 0; i < jianfalist.Count; i++)
                                    {
                                        if (StylistPricelist != null && StylistPricelist.Select(x => x.PriceID).ToList().Contains(jianfalist[i].ID))
                                        {
                                            <tr>
                                                <th class="formTitle">@jianfalist[i].Name</th>
                                                <td class="formValue"><input id="@jianfalist[i].ID" name="@jianfalist[i].ID" type="text" placeholder="价格" style="width:60px;" value="@StylistPricelist.Where(x => x.PriceID == jianfalist[i].ID).FirstOrDefault().Price" /></td>
                                            </tr>
                                        }
                                        else
                                        {
                                            <tr>
                                                <th class="formTitle">@jianfalist[i].Name</th>
                                                <td class="formValue"><input id="@jianfalist[i].ID" name="@jianfalist[i].ID" type="text" placeholder="价格" style="width:60px;" value="" /></td>
                                            </tr>
                                        }
                                    }
                                }
                            }
                        </table>
                    </div>
                </div>

                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">烫染价格配置</h3>
                    </div>
                    <div class="panel-body">
                        <table class="form">
                            @{
                                var tangranlist = PriceConfiglist.Where(x => x.Type == 2).ToList();
                                if (tangranlist != null && tangranlist.Count > 0)
                                {
                                    for (int i = 0; i < tangranlist.Count; i++)
                                    {

                                        if (StylistPricelist != null && StylistPricelist.Select(x => x.PriceID).ToList().Contains(tangranlist[i].ID))
                                        {
                                            <tr>
                                                <th class="formTitle">@tangranlist[i].Name</th>
                                                <td class="formValue"><input id="@tangranlist[i].ID" name="@tangranlist[i].ID" type="text" placeholder="价格" style="width:60px;" value="@StylistPricelist.Where(x => x.PriceID == tangranlist[i].ID).FirstOrDefault().Price" /></td>
                                            </tr>
                                        }
                                        else
                                        {
                                            <tr>
                                                <th class="formTitle">@tangranlist[i].Name</th>
                                                <td class="formValue"><input id="@tangranlist[i].ID" name="@tangranlist[i].ID" type="text" placeholder="价格" style="width:60px;" value="" /></td>
                                            </tr>
                                        }
                                    }
                                }
                            }
                        </table>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-success" onclick="OpenWindow();">上传内页展示图</button>
            <div class="row" id="imgs">

                @{
                    if (pic_list != null)
                    {
                        for (int i = 0; i < pic_list.Count; i++)
                        {
                            <div class="col-xs-6 col-md-3">
                                <img flag="group4" flag1="@i" src="@(GetPicDomin + pic_list[i].Url)" alt="" class="img-thumbnail" style="width:400px; height:200px;" />
                                <a class="glyphicon  glyphicon-remove" flag2="@i" role="menuitem" tabindex="-1" style="width: 80px; cursor: pointer;" onclick="DelPic(this)"> 删除图片</a>
                            </div>
                        }
                    }
                }
            </div>
            <input type="hidden" id="urls" name="urls" value="@urls" />
            <input type="hidden" id="hd_tr_count" name="hd_tr_count" value="@DetailsInfoList.Count" />
        </div>
    </div>
</form>
<script>
    function UpdateSinglePic() {
        $("#file1").click();
    }

    ///////////////
    function ViewPic(index) {
        var arry = new Array();
        $("img[flag='group4']").each(function () {
            var obj = {};
            obj.alt = $("#P_ChineseName").val();
            obj.pid = 1;
            obj.src = $(this).attr("src");
            obj.thumb = $(this).attr("src");
            arry.push(obj);
        });

        var json = {
            "title": $("#P_ChineseName").val() + "的图片预览", //相册标题
            "id": 123, //相册id
            "start": index, //初始显示的图片序号，默认0
            "data": arry
        }
        layer.photos({
            photos: json //格式见API文档手册页
            , shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
    }
    function OpenWindow() {
        top.layer.open({
            id: "UploadPic",
            title: "图片上传",
            content: "/Stylist/UploadPic",
            area: ["800px", "580px"],
            shade: 0.3,
            type: 2,
            fix: false,
            btn: ['确认', '关闭'],
            btnclass: ['btn btn-primary', 'btn btn-danger'],
            yes: function (index, layero) {
                var tem = $(layero).find("iframe")[0].contentWindow.getUrls();
                PicCallBack(tem);
                parent.layer.close(index);
            }, cancel: function () {
                return true;
            }
        });
    }

    function PicCallBack(ArryUrl) {
        var imgs_str = "";
        for (i = 0; i < ArryUrl.length; i++) {
            var temurl = GetPicDomin + ArryUrl[i];
            imgs_str += '<div class="col-xs-6 col-md-3"><img flag="group4" flag1="' + ($("img[flag='group4']").length + i) + '" src="' + temurl + '" alt="..." class="img-thumbnail" style="width:400px; height: 200px;" />  <a class="glyphicon glyphicon-remove" flag1="' + ($("img[flag='group4']").length + i) + '" role="menuitem" tabindex="-1" style="width: 80px; cursor: pointer; " onclick="DelPic(this)"> 删除图片</a></div>';
        }
        $("#imgs").append(imgs_str);
        if ($("#urls").val().trim() != "") {
            $("#urls").val($("#urls").val() + "," + ArryUrl.join(","));
        }
        else {

            $("#urls").val(ArryUrl.join(","));
        }
        initPicBox();//重新绑定事件
    }
    function initPicBox()//初始化图片窗口
    {
        $("img[flag='group4']").each(function () {
            $(this).click(function () {
                var tem = parseInt($(this).attr("flag1"));
                ViewPic(tem);
                //$(".group4").eq(tem).click();
            });
        });
    }

    function DelPic(obj) {
        var temurl = $(obj).prev().attr("src");
        var delurl = temurl.substring(temurl.lastIndexOf('/') + 1);
        $.ajax({
            url: "/PicUpload/DelPic",
            data: { url: delurl },
            dataType: "json",
            async: false,
            success: function (data) {
                var tem = $("#urls").val().trim()
                var newarry = new Array();
                if (tem != "") {
                    var arry = tem.trim().split(',');
                    for (var i = 0; i < arry.length; i++) {
                        if (arry[i].indexOf(delurl) == -1) {
                            newarry.push(arry[i]);
                        }
                    }
                    $("#urls").val(newarry.join(","));
                }

                $(obj).parent().remove();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    }

    function SelectShopInfo() {
        top.layer.open({
            id: "ShopSelect",
            title: "选择店面信息",
            content: "/Stylist/SelectShop",
            area: ["800px", "580px"],
            shade: 0.3,
            type: 2,
            fix: false,
            btn: ['确认', '关闭'],
            btnclass: ['btn btn-primary', 'btn btn-danger'],
            yes: function (index, layero) {
                var tem = $(layero).find("iframe")[0].contentWindow.getSelectInfo();
                PersonSelectCallBack(tem)
                parent.layer.close(index);
            }, cancel: function () {
                return true;
            }
        });
    }
    function PersonSelectCallBack(obj) {
        if (obj != null) {
            $("#ShopID").val(obj.ShopGuid);
            $("#ShopName").val(obj.ShopName);
        }
    }
    function btn_addDetails() {
        var length = $("#tb_userInfo").find("tr").length;
        var tr_str = '';
        tr_str += '<tr>';
        tr_str += '<td class="formValue" > <input type="text" id="txt_column_name' + length + '" name="txt_column_name' + length + '" class="form-control" maxlength="100" style="width:128px;margin:3px;padding:2px;" placeholder="名称：【个人介绍：】" /></td >';
        tr_str += ' <td class="formValue"><input type="text" id="txt_column_details' + length + '" name="txt_column_details' + length + '" class="form-control" maxlength="100" style="width:271px;margin:3px;padding:2px;" placeholder="描述：【上海沙宣总监课程、深圳钎手造型班】" /></td>';
        tr_str += '<td class="formValue"><input type="text" id="txt_column_time' + length + '" name="txt_column_time' + length + '" class="form-control" maxlength="100" style="width:153px;margin:2px;padding:3px;" placeholder="时间：【2012.1～2014.1】" /></td>';
        tr_str += '<td class="formValue"><input type="text" id="txt_column_remark' + length + '" name="txt_column_remark' + length + '" class="form-control" maxlength="100" style="width:171px; margin:3px;padding:2px;" placeholder="职位：【职位：首席造型师】" /></td>';
        tr_str += '</tr >';
        $("#tb_userInfo").append(tr_str);

        $("#hd_tr_count").val((length + 1));
    }
</script>